<template>
  <div>
    <div class="CONTENT ps">
      <section class="YT_VIEW YT_COLUMN_FLUID">
        <header class="HEADER ivu-row-flex ivu-row-flex-middle">
          <!-- <div>
            <Form ref="formInline" :model="formInline" inline>
              <FormItem>
                <Select style="width: 120px" v-model="formInline.position_id">
                  <Option value="">所有</Option>
                  <Option value="shanghai">超级管理员</Option>
                  <Option value="shenzhen">员工</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Select style="width: 150px" v-model="formInline.employee_store">
                  <Option value="wu">无分店员工</Option>
                  <Option value="dezhou">德州城市花园摄影</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Input v-model="formInline.employee_name" placeholder="请输入手机号或姓名或昵称"></Input>
              </FormItem>
              <FormItem>
                <Button type="primary" size="small" @click="handleSubmit('formInline')">搜索</Button>
              </FormItem>
            </Form>
          </div> -->
          <div>
            <ButtonGroup>
              <!-- <Button type="primary" size="small" ghost icon="ios-finger-print">员工二维码</Button> -->
              <Button type="primary" size="small" ghost icon="md-add-circle" @click="modal1 = true">创建员工</Button>
              <!-- <Dropdown>
                <DropdownMenu slot="list">
                  <DropdownItem>创建员工</DropdownItem>
                  <DropdownItem>已有账号迁入</DropdownItem>
                </DropdownMenu>
              </Dropdown> -->
              <!-- <Button type="success" size="small" ghost icon="md-add-circle">导入员工</Button> -->
            </ButtonGroup>
          </div>
        </header>
        <section class="WRAP">
          <div>
            <vxe-table
              border
              show-overflow
              ref="tableRef"
              :loading="loading"
              height="400"
              :edit-config="{trigger: 'click', mode: 'cell'}"
              @edit-closed="handleEditClosed"
              :data="tableData">
              <vxe-column field="employee_name" width="80" :edit-render="{name: 'input'}" title="姓名" ></vxe-column>
              <vxe-column field="username" width="100" :edit-render="{name: 'input'}" title="手机" ></vxe-column>
              <vxe-column field="sex" width="80" title="在职状态" ></vxe-column>
              <vxe-column field="store_name" width="100" :edit-render="{}" title="分店">
                <template #edit="{ row }">
                  <vxe-select v-model="row.store_id" :options="storeOptions" filterable></vxe-select>
                </template>
                <template #default="{ row }">
                  <span>{{ row.store_name }}</span>
                </template>
              </vxe-column>
              <vxe-column field="department_name" width="100" :edit-render="{}" title="部门1">
                <template #edit="{ row }">
                  <vxe-select v-model="row.department_id" :options="departmentsOptions" filterable></vxe-select>
                </template>
                <template #default="{ row }">
                  <span>{{ row.department_name }}</span>
                </template>
              </vxe-column>
              <!-- <vxe-column field="department_name" width="100" :edit-render="{}" title="部门">
                <template #edit="{ row }">
                  <vxe-select v-model="row.department_id" :options="departmentsOptions" filterable></vxe-select>
                </template>
                <template #default="{ row }">
                  <span>{{ row.department_name }}</span>
                </template>
              </vxe-column> -->
              <vxe-column field="kz_role_name" :edit-render="{}" width="130" title="客资角色">
                <template #edit="{ row }">
                  <vxe-select v-model="row.kz_role_id" :options="kzRoleOptions" filterable></vxe-select>
                </template>
                <template #default="{ row }">
                  <span>{{ row.kz_role_name }}</span>
                </template>
              </vxe-column>
              <vxe-column field="order_role_name" :edit-render="{}" width="100" title="订单角色">
                <template #edit="{ row }">
                  <vxe-select v-model="row.order_role_id" :options="orderRoleOptions" filterable></vxe-select>
                </template>
                <template #default="{ row }">
                  <span>{{ row.order_role_name }}</span>
                </template>
              </vxe-column>
              <vxe-column field="adminFlag" title="管理员">
                <template #default="{ row }">
                  <vxe-switch v-model="row.flag2"></vxe-switch>
                </template>
              </vxe-column>
              <vxe-column field="auth_id" title="ID"></vxe-column>
              <!-- <vxe-column title="操作" width="150" fixed="right">
                <template #default="{ row }">
                  <template v-if="hasEditStatus(row)">
                    <vxe-button size="small" @click="saveRowEvent(row)">保存</vxe-button>
                    <vxe-button size="small" @click="cancelRowEvent()">取消</vxe-button>
                  </template>
                  <template v-else>
                    <vxe-button size="small" @click="editRowEvent(row)">编辑</vxe-button>
                  </template>
                </template>
              </vxe-column> -->
            </vxe-table>
          </div>
        </section>
      </section>
    </div>
    <Modal :loading="loadingModal" v-model="modal1" title="创建员工" @on-ok="ok" width="600px">
      <Form autocomplete="off" label-position="top" ref="modalFormInline" :model="modalFormInline" :rules="modalRuleInline" inline>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="姓名" prop="employee_name" style="width: 100%;">
              <Input v-model="modalFormInline.employee_name"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="手机" prop="phone_number" style="width: 100%;">
              <Input v-model="modalFormInline.phone_number"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="密码" prop="password" style="width: 100%;">
              <Input type="password" v-model="modalFormInline.password"></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import { getAllEmployeesApi, createEmployeeApi, updateEmployeeApi } from '@/api/account/index.js'
  export default {
    data() {
      var validatePhoneNumber = (rule, value, callback) => {
        if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          if (this.modalFormInline.phone_number !== '') {
            this.$refs.modalFormInline.validateField('phone_number');
          }
          callback();
        }
      };
      return {
        loadingModal: true,
        formInline: {
          position_id: '',
          employee_store: 'dezhou',
          employee_name: ''
        },
        modalFormInline: {
          employee_name: '',
          phone_number: '',
          password: '',
        },
        modalRuleInline: {
          employee_name: [{ required: true, message: '姓名必填' }],
          phone_number: [
            { required: true, message: '手机必填' },
            { validator: validatePhoneNumber, trigger: 'blur' },
          ],
          password: [{ required: true, message: '密码必填' }],
        },
        tableData: [],
        loading: false,
        modal1: false,
        orderRoleList: [],
        kzRoleList: [],
        storeList: [],
        departmentsList: [],
        kzRoleOptions: [],
        orderRoleOptions: [],
        storeOptions: [],
        departmentsOptions: [],
      }
    },
    /* watch: {
      '$store.state.layout.app.kzRoleList'(newValue, oldValue) {
        this.kzRoleList = newValue
        const list = []
        for (let i = 0; i < this.kzRoleList.length; i++) {
          list.push({
            value: this.kzRoleList[i].kz_role_id,
            label: this.kzRoleList[i].kz_role_name
          })
        }
        this.kzRoleOptions = list
      },
      '$store.state.layout.app.orderRoleList'(newValue, oldValue) {
        this.orderRoleList = newValue
        const list2 = []
        for (let i = 0; i < this.orderRoleList.length; i++) {
          list.push({
            value: this.orderRoleList[i].order_role_id,
            label: this.orderRoleList[i].role_name
          })
        }
        this.orderRoleOptions = list2
      }
    }, */
    created() {
      this.getAllE();
      this.initRoleData()
    },
    methods: {
      initRoleData() {
        this.kzRoleList = this.$store.state.layout.app.kzRoleList
        this.orderRoleList = this.$store.state.layout.app.orderRoleList
        this.storeList = this.$store.state.layout.app.storeList
        this.departmentsList = this.$store.state.layout.app.departmentsList
        // 模拟后端接口
        setTimeout(() => {
          const list = []
          for (let i = 0; i < this.kzRoleList.length; i++) {
            list.push({
              value: this.kzRoleList[i].kz_role_id,
              label: this.kzRoleList[i].kz_role_name
            })
          }
          this.kzRoleOptions = list

          const list2 = []
          for (let i = 0; i < this.orderRoleList.length; i++) {
            list2.push({
              value: this.orderRoleList[i].order_role_id,
              label: this.orderRoleList[i].role_name
            })
          }
          this.orderRoleOptions = list2

          const list3 = []
          for (let i = 0; i < this.storeList.length; i++) {
            list3.push({
              value: this.storeList[i].store_id,
              label: this.storeList[i].store_name
            })
          }
          this.storeOptions = list3

          const list4 = []
          for (let i = 0; i < this.departmentsList.length; i++) {
            list4.push({
              value: parseInt(this.departmentsList[i].department_id),
              label: this.departmentsList[i].department_name
            })
          }
          this.departmentsOptions = list4
        }, 100)
      },
      getAllE() {
        getAllEmployeesApi().then(res => {
          if (res.rstpCode == '0000') {
            this.tableData = res.data
            this.tableData.forEach(item => {
              item['adminFlag'] = false
            })
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      ok () {
        this.$refs['modalFormInline'].validate((valid) => {
            if (valid) {
              createEmployeeApi(this.modalFormInline).then(res => {
                this.loadingModal = false
                if (res.rstpCode == '0000') {
                  this.$Message.success('创建成功!');
                  this.getAllE()
                  this.modal1 = false
                } else {
                  this.$Message.error(res.rstpMsg);
                }
              })
            } else {
              this.loadingModal = false
            }
        })
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      handleEditClosed ({ row, column, $table }) {
        // 当编辑关闭时，可以在这里保存数据
        console.log(row);
        updateEmployeeApi(row).then(res => {
          if (res.rstpCode == '0000') {
            // this.$Message.success('修改成功!');
            this.getAllE()
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      /* formatRoleLabel (role) {
        const item = this.kzRoleList.find(item => item.value === role)
        return item ? item.label : role
      } */
    }
  }
</script>

<style scoped>

</style>
